<template>
    <div>
        <div id="mydiv">
            尊敬的{{usermonicker}},欢迎来到后台管理系统,职位是 :
            <span style="color: #FF0080">{{rolename}}</span>
        </div>
        <el-divider></el-divider>
        <div id="data">数据汇总</div>
        <el-divider></el-divider>
        <div id="pei3" style="width: 90%;height: 400px"></div>

    </div>
</template>

<script>
    import * as echarts from 'echarts'
    export default {
        name: "Host",
        data(){
            return{
                ruleForm:{},
                // 登录者的角色
                rolename:"",
                // 登录者的昵称
                usermonicker:"",
                // 用户id
                roleid:0,
                // 饼状图的显示和隐藏
                conceal:false,
                column:false,
                // 柱状图
                option:{
                    toolbox: {
                        show: true,
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    title: {
                        text: '餐馆业绩统计(没有显示则业绩为0)',
                        subtext: '实时更新',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    xAxis: {
                        type: 'category',
                        data: [],
                        axisTick: {
                            alignWithLabel: true
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: [],
                            type: 'bar',
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(180, 180, 180, 0.2)'
                            }
                        }
                    ]
                },
            }
        },
        created() {
            // 查询登录者的信息
            this.selectUserMessage();
            // 查询统计的数据
            this.tongji();
        },
        methods:{
            // 查询登录者的信息
            selectUserMessage(){
                var token = sessionStorage.getItem("token");
                this.$http.post("/user/user/selectById?token="+token).then(result=>{
                    this.usermonicker=result.data.data.user.usermonicker;
                    this.rolename=result.data.data.user.rolename;
                    this.roleid=result.data.data.user.roleid;
                });
            },
            tongji(){
                // 存放柱状图的x轴数据
                this.xdata=[];
                // 存放柱状图的y轴数据
                this.ydata=[];
                var token = sessionStorage.getItem("token");
                this.$http.post("/collect/collect/selectTongJi?token="+token).then(result=>{
                    if (this.rolename==="超级管理员"){
                        for (var i=0;i<result.data.data.length;i++){
                            this.xdata.push(result.data.data[i].restaurantname);
                            this.ydata.push(result.data.data[i].dishTotalPrice);
                        }
                    }else {
                        for (var i=0;i<result.data.data.length;i++){
                            this.xdata.push(result.data.data[i].dishName);
                            this.ydata.push(result.data.data[i].dishTotalPrice);
                        }
                    }
                    console.log(this.xdata)
                    console.log(this.ydata)
                    console.log(result)
                    this.option.xAxis.data=this.xdata;
                    this.option.series[0].data=this.ydata;
                    let chart = echarts.init(document.getElementById('pei3'));
                    chart.setOption(this.option);
                    //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
                    window.addEventListener('resize',function() {chart.resize()});
                })
            }
        },
    }
</script>
<style scoped>
    #mydiv{
        font-size: 30px;
        font-family: 隶书;
    }
    #pei3{
        display: inline-block;
        margin-left:20px ;
        margin-right: 40px;
    }
    #data{
        height: 60px;
        line-height: 60px;
        font-size: 30px;
        font-family: 隶书;
        color: #3a8ee6;
    }
</style>